import React, { useEffect, useState } from "react";
import { Link, animateScroll as scroll } from "react-scroll";
import { Canvas } from "@react-three/fiber";
import { useGLTF, OrbitControls } from "@react-three/drei";
import "./Home.css";
import MiCarousel from "../../components/zh/MiCarousel";
import HuaweiRecommendations from "../../components/zh/HuaweiRecommendations";
import Simple3DModel from "../../components/zh/Simple3DModel";
import Shi from "../../components/zh/Shi";
import { useNavigate } from "react-router-dom";

interface ModelProps {
  url: string;
}

function Model({ url }: ModelProps) {
  const { scene } = useGLTF(url); // 加载模型
  return <primitive object={scene} scale={1} />;
}

function App() {
  const [isTransparent, setIsTransparent] = useState<boolean>(true);
  const modelUrl: string = "./public/1/scene.gltf";

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 0) {
        setIsTransparent(false);
      } else {
        setIsTransparent(true);
      }
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  const scrollToTop = (): void => {
    navigate("/shopping");
    scroll.scrollToTop();
  };

  const carouselImages: string[] = [
    "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/15c05b32cf948b594477dfc3eb69fb69.jpg",
    "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/918820682e4a490221cfd92b24c14b86.jpg",
  ];
  const navigate = useNavigate();
  return (
    <div className="app">
      {/* 导航栏 */}
      <nav className={`navbar ${isTransparent ? "transparent" : ""}`}>
        <div className="container">
          <button onClick={scrollToTop} className="logo">
            智电馆
          </button>
          <ul className="nav-links">
            <li>
              <Link
                activeClass="active"
                to="home"
                spy={true}
                smooth={true}
                offset={-150}
                duration={500}
              >
                首页
              </Link>
            </li>
            <li>
              <Link
                activeClass="active"
                to="about"
                spy={true}
                smooth={true}
                offset={-150}
                duration={500}
              >
                推荐
              </Link>
            </li>
            <li>
              <Link
                activeClass="active"
                to="services"
                spy={true}
                smooth={true}
                offset={-150}
                duration={500}
              >
                服务
              </Link>
            </li>
            <li>
              <Link
                activeClass="active"
                to="portfolio"
                spy={true}
                smooth={true}
                offset={-150}
                duration={500}
              >
                新闻
              </Link>
            </li>
            <li>
              <Link
                activeClass="active"
                to="contact"
                spy={true}
                smooth={true}
                offset={-150}
                duration={1000}
              >
                联系
              </Link>
            </li>
          </ul>
        </div>
      </nav>

      {/* 页面内容部分 */}
      <section id="home" className="section home-section">
        <div className="container qu">
          <MiCarousel images={carouselImages} interval={3000} />
        </div>
      </section>

      <section id="about" className="section about-section">
        <div className="container">
          <h2>推荐商品</h2>
          <HuaweiRecommendations />
        </div>
      </section>

      <section id="services" className="section services-section">
        <div className="container">
          <h2>我们的服务</h2>
          <div className="services-grid">
            <div className="service-card">
              <h3>手机</h3>
              <p>专业的响应式网页设计服务。</p>
            </div>
            <div className="service-card">
              <h3>笔记本</h3>
              <p>高质量的网站和应用开发。</p>
            </div>
            <div className="service-card">
              <h3>家电</h3>
              <p>提升您的网站在搜索引擎中的排名。</p>
            </div>
            <div className="service-card">
              <h3>汽车</h3>
              <p>提升您的网站在搜索引擎中的排名。</p>
            </div>
            <div className="service-card">
              <h3>SEO优化</h3>
              <p>提升您的网站在搜索引擎中的排名。</p>
            </div>
            <div className="service-card">
              <h3>SEO优化</h3>
              <p>提升您的网站在搜索引擎中的排名。</p>
            </div>
          </div>
        </div>
      </section>

      <section id="portfolio" className="section portfolio-section">
        <div className="container">
          <h2 style={{ textAlign: "center" }}>最近的新闻</h2>
          <p style={{ textAlign: "center", marginBottom: "40px" }}>
            查看我们的一些最新消息。
          </p>
          <Shi />
        </div>
      </section>

      <section id="contact" className="section contact-section">
        <div className="container">
          <h2>联系我们</h2>
          <form className="contact-form">
            <input type="text" placeholder="您的姓名" />
            <input type="email" placeholder="您的邮箱" />
            <textarea placeholder="您的消息"></textarea>
            <button type="submit">发送</button>
          </form>
        </div>
      </section>

      {/* 返回顶部按钮 */}
      <button onClick={scrollToTop} className="scroll-to-top">
        ↑
      </button>
    </div>
  );
}

export default App;
